<template>
	<view class="container flex2">
		<map name="map" class="mapBox" id="map" :longitude='longitude' :markers='markers' :latitude='latitude'
			:show-location="true"></map>
		<view class="searchBox">
			<view class="inputBox flex-ac">
				<image src="../../../../static/img/ss.png" mode=""></image>
				<input type="text" v-model="keyWords" @input="searchAddr" placeholder="请输入你的地址"
					placeholder-style="color: #CCCCCC;" />
			</view>
		</view>
		<image src="../../../../static/img/dw.png" class="dw" @click="getLocation(2)" mode=""></image>
		<view class="dzBox">
			<scroll-view scroll-y="true" style="width: 100%; height: 100%; padding: 0 30rpx;">
				<view class="cell" v-for="(item,index) in addrList" :key="index" @click="chooseAddr(item)">
					<view class="hd">{{item.name}}</view>
					<view class="bd">{{item.address}}</view>
				</view>
				<x-botSpace></x-botSpace>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import config from '../../../../utils/config.js' //这个就是你在第一步申请的key值
	const amapFile = require('../../../../utils/amap-wx.130.js') //引入高德地图 ，根据自己放置的文件路径来决定
	const myAmapFun = new amapFile.AMapWX({
		key: config.MAP_KEY
	}); //创建一个实例化对象
	export default {
		data() {
			return {
				longitude: '',
				latitude: '',
				addrList: [],
				markers: [],
				addrName: '',
				keyWords: '',
				city: '',
				districtName: '',
				type: 1, // 1装货地址 2卸货地址
			}
		},
		onLoad(opt) {
			if (opt){
				console.log('opt:', opt)
				this.type = opt.type
			}
			this.getLocation()
		},
		methods: {
			// 选择地址
			chooseAddr(item){
				console.log('item:', item)
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				if(this.type == 1){
					prevPage.$vm.form.loadingLongitude = item.location.split(',')[0]
					prevPage.$vm.form.loadingLatitude = item.location.split(',')[1]
					prevPage.$vm.form.loadingAddress = item.name
				}else{
					prevPage.$vm.form.unloadingLongitude = item.location.split(',')[0]
					prevPage.$vm.form.unloadingLatitude = item.location.split(',')[1]
					prevPage.$vm.form.unloadingAddress = item.name
				}
				this.$Jump.Back(1)
			},
			// 获取当前定位
			getLocation(type = 1) {
				uni.getLocation({
					type: 'wgs84',
					success: async (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.longitude = res.longitude
						this.latitude = res.latitude
						if (type === 2) {
							this.keyWords = ''
							const mapCtx = uni.createMapContext("map");
							mapCtx.moveToLocation({
								latitude: this.latitude,
								longitude: this.longitude,
								success: () => {
									const timer = setTimeout(() => {
										this.longitude = this.longitude,
										this.latitude = this.latitude,
										clearTimeout(timer);
									}, 300);
								}
							})
						}
						this.getAddrInfo(this.longitude, this.latitude)
					},
					complete: (res) => {
						console.log(res)
					}
				});
			},

			// 根据经纬度获取位置信息
			getAddrInfo(longitude, latitude) {
				myAmapFun.getRegeo({
					location: `${longitude},${latitude}`,
					success: (res) => {
						console.log('地址信息：', res)
						this.addrList = res[0].regeocodeData.pois
						this.addrName = this.addrList[0].name
						if(this.city === ''){
							this.city = res[0].regeocodeData.addressComponent.province
						}
						this.markers[0] = {
							id: 1,
							latitude: this.latitude,
							longitude: this.longitude,
							iconPath: '/static/img/dqdw.png',
							width: 20,
							height: 36,
							callout: {
								content: this.addrName,
								borderRadius: 10,
								bgColor: '#FFFFFF',
								display: 'ALWAYS',
								padding: 8,
								anchorY: -3
							}
						}
					},
					fail: (err) => {
						console.log('地址解析错误：', err)
					}
				})
			},

			// 搜索地址
			searchAddr() {
				if(this.keyWords === '') return
				myAmapFun.getInputtips({
					keywords: this.keyWords,
					location: '',
					city: this.city,
					citylimit: true,
					success: (data) => {
						console.log(111, data);
						if (data && data.tips) {
							this.longitude = data.tips[0].location.split(',')[0]
							this.latitude = data.tips[0].location.split(',')[1]
							const timer = setTimeout(() => {
								this.addrList = data.tips
								this.markers[0] = {
									id: 2,
									latitude: this.addrList[0].location.split(',')[1],
									longitude: this.addrList[0].location.split(',')[0],
									iconPath: '/static/img/dqdw.png',
									width: 20,
									height: 36,
									callout: {
										content: this.addrList[0].name,
										borderRadius: 10,
										bgColor: '#FFFFFF',
										display: 'ALWAYS',
										padding: 8,
										anchorY: -3
									}
								}
								clearTimeout(timer);
							}, 300);
						}
					},
					fail: data => {
						console.log(222, data);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
</style>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
	}

	.mapBox {
		height: calc(100vh - 600rpx);
		width: 100%;
	}

	.searchBox {
		width: 100%;
		height: 120rpx;
		position: fixed;
		z-index: 100;
		background-color: #fff;
		left: 0;
		top: 0;
		padding: 20rpx 30rpx;

		.inputBox {
			width: 100%;
			height: 100%;
			background-color: #F7F7F7;
			border-radius: 10rpx;
			padding: 0 30rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			input {
				flex: 1;
				height: 100%;
				font-size: 30rpx;
				color: #333;
			}
		}
	}

	.dw {
		position: fixed;
		bottom: 720rpx;
		right: 20rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.dzBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 680rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;

		.cell {
			width: 100%;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #F5F7FB;

			.hd {
				font-size: 34rpx;
				color: #333;
				width: 100%;
			}

			.bd {
				margin-top: 10rpx;
				width: 100%;
				font-size: 26rpx;
				color: #999;
			}
		}
	}
</style>